<template>
	<view class="min100" style="">
		<view class="">
			<!-- 头部 -->
			<view class="diamondMall_head p20 flex-between flex1"
				:style="[{ background: bg_color},{paddingTop:blindBoxheight+'rpx'}]">
				<view class="" style="margin: -15rpx 0 0 0;">
					<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
						@click="backmarket()"></image>
				</view>
				<view class="size-30 center" :style="{opacity:textcolor}">
					{{info.name}}
				</view>
				<view class="" style="margin: -15rpx 0 0 0;">
<!--					<image class="collection"-->
<!--						:src="info.is_focus==0?'../../static/home/aixinold.png':'../../static/home/aixinnew.png'"-->
<!--						v-show="showUpImg" @click="changeImg" style="width: 40rpx;height: 40rpx;">-->
<!--					</image>-->

<!--					<image class="collection"-->
<!--						:src="info.is_focus==1?'../../static/home/aixinold.png':'../../static/home/aixinnew.png'"-->
<!--						v-show="!showUpImg" @click="changeImg" style="width: 40rpx;height: 40rpx;">-->
<!--					</image>-->
                    <block v-if="showUpImg">
                        <u-icon class="collection" @click="changeImg()" name="heart-fill" size="34" color="#0dd1f3" v-if="info.is_focus==1" style="float: right;"></u-icon>
                        <u-icon class="collection" @click="changeImg()" name="heart" size="34" color="#999" v-else style="float: right;"></u-icon>

                    </block>
                    <block v-if="!showUpImg">
                        <u-icon class="collection" @click="changeImg()" name="heart-fill" size="34" color="#0dd1f3" v-if="info.is_focus!=1" style="float: right;"></u-icon>
                        <u-icon class="collection" @click="changeImg()" name="heart" size="34" color="#999" v-else style="float: right;"></u-icon>

                    </block>
                    <!-- ../../static/home/aixinold.png -->
				</view>
			</view>
			<view class="topWrap  " style="">
				<image class="home_detail_bg" src="../../static/index/detail_bg.jpg" mode=""></image>
<!--				<img :src="info.images">-->
                <u-swiper class="collectImg" :list="info.images_arr" :height="560"></u-swiper>
				<view class="autrhorinfo  radius-20  size-40 ">
					<view class="" style="color: #FFF;">
						￥{{info.price}}
					</view>
					<view class="detail_name" style="color: #000;">
						<view class="flex" style="justify-content: flex-start">
							<view style="margin-right: 20rpx">{{info.name}}</view>
                            <view class="" style="width: 40rpx;height: 40rpx;">
                                <image @click=copy(info.name) src="../../static/my/fuzhi.png" mode=""
                                       style="width: 100%;height: 100%;"></image>
                            </view>
						</view>
						<view class="" style="display: flex;">
							<view class="" style="display: flex;margin: 40rpx 40rpx 0 0;;border-radius: 8rpx;overflow: hidden">
								<view class="homedetail_limit_1">
									限量
								</view>
								<view class="homedetail_limit_2">
									{{info.stock}}份
								</view>
							</view>
							<view class="" style="display: flex;margin: 40rpx 40rpx 0 0;border-radius: 8rpx;overflow: hidden">
								<view class="homedetail_limit_1">
									流通
								</view>
								<view class="homedetail_limit_2">
									{{info.surplus}}份
								</view>
							</view>
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 690rpx;margin: 20rpx 0 0 -30rpx;">
						<view class="honmedetail_three" @click="goBrandside(info.goods_category_id,id)">
							<view class="">
								<image src="../../static/home/pinpaifang.png" mode="widthFix" style="width: 80rpx;">
								</image>
							</view>
							<view class="" style="display: flex;margin: 10rpx 0 0 0;">
								<view class="" style="width: 50rpx;height: 50rpx;">
									<image :src="info.author_image" mode=""
										style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view class=""
									style="display: flex;width: 70%;justify-content: space-between;align-items: center;margin: 0 0 0 20rpx;">
									<view class="goods_category_name">
										{{info.goods_category_name}}
									</view>
									<view class="">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="honmedetail_three" @click="goCreator(info.author_id,id)">
							<view class="">
								<image src="../../static/home/author.png" mode="widthFix" style="width: 80rpx;">
                                </image>
							</view>
							<view class="" style="display: flex;margin: 10rpx 0 0 0;">
								<view class="" style="width: 50rpx;height: 50rpx;">
									<image :src="info.goods_category_image" mode=""
										style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view class=""
									style="display: flex;width: 70%;justify-content: space-between;align-items: center;margin: 0 0 0 20rpx;">
									<view class="author">
										{{info.author_name}}
									</view>
									<view class="">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
                    <view class="album">
                        <view class="flex_between album_box1">
                            <view class="flex">
                                商品编号
                            </view>
                            <view class="" style="font-size: 36rpx;font-weight: 600;margin-left: 220rpx">
                                {{info.goods_num}}
                            </view>
                            <view style="height: 38rpx;display: flex;justify-content: center;align-items: center;padding: 4rpx 10rpx;border: 2rpx solid #999;border-radius: 20rpx;font-size: 20rpx;">查看寄售记录 <u-icon name="arrow-right" size="20" colo="#999"></u-icon></view>
                        </view>
                    </view>
					<view class="album">
						<view class="flex_between album_box">
							<view class="flex">
								所属专辑
							</view>
							<view class="flex">
								{{info.network_name}}
							</view>
						</view>
						<view class="flex_between album_box1">
							<view class="flex">
								合约地址
							</view>
							<view class="flex">
								<view class="" style="margin: 0 10rpx 0 0rpx;">
									{{info.meta_data==''?'暂无地址':info.meta_data}}
								</view>
								<view class="" style="width: 25rpx;height: 25rpx;">
									<image @click=copy(userInfo.wallet_address) src="../../static/my/fuzhi.png" mode=""
										style="width: 100%;height: 100%;"></image>
								</view>
							</view>
						</view>


					</view>
                    <view class="" style="margin: 20rpx 0 0 0;">
                        <image src="../../static/home/cangpingushi.png" mode="widthFix" style="width: 140rpx;">
                        </image>
                    </view>

                    <view class="size-22 mt-20">
                        <view class="" v-html="content"></view>
                        <!-- <u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse> -->
                    </view>
                    <view class="" style="margin: 20rpx 0 0 0;">
                        <image src="../../static/home/goumai.png" mode="widthFix" style="width: 140rpx;">
                        </image>
                    </view>
                    <view class="size-22 mt-20 " style="padding-bottom: 200rpx;">
                        <u-parse :content="buy_content" @preview="preview" @navigate="navigate"></u-parse>
                    </view>

				</view>

			</view>

		</view>
        <view class="shop_bg"></view>
		<view class="btmWrap flex pt-30 flex-between plr-30 pb-30">
			<u-button shape="square" size="medium" class='btn_color' @click="handleresale" v-if="info.is_transfer==1 && status !== 0">转售</u-button>
			<u-button shape="square" size="medium" class='btn_color' @click="handlerelower" v-if="status==2">下架</u-button>
			<u-button shape="square" size="medium" class='btn_color' @click="handleresell" v-if="status!==3 && status!==2">出售</u-button>
			<!-- <u-button shape="square" size="medium" class='btn_color' @click="handleprice">改价</u-button> -->
		</view>
		<!-- 转售 -->
		<u-popup v-model="handleresaleshow" mode="center" border-radius=20>
			<view class="p10" style="width: 700rpx;height: 350rpx;">
				<view class="center fw size-32 mt-30">
					转赠
				</view>
				<u-input v-model="valuephone" class='ml-20 mt-20' placeholder='请输入受赠人手机号'></u-input>
				<u-button class="mt-40 btn_color" shape="circle" style='' @click="clicksaleshow()">确认</u-button>
			</view>
		</u-popup>
		<!-- 出售 -->
		<u-popup v-model="handleresaleshowsell" mode="center" border-radius=20>
			<view class="p10" style="width: 700rpx;height: 540rpx;">
				<view class="center fw size-32 mt-30">
					出售详细
				</view>
				<view class="p10">
					<view class="flex1 center mt-20">
						<view class=""> 出售(￥)</view>
						<u-input maxlength=6 v-model="inputcellmodel" @input="inputcell" class='ml-20 '
							placeholder='请输入价格'></u-input>
					</view>
					<view class="" style="line-height: 50rpx;">
						<view class="flex1 flex-between">
							<view class="size-20">
								平台服务费{{this.configurationlist.terrace_rate}}%:
							</view>
							<view class="">
								-￥{{sellprice1==''? '0.00':sellprice1}}
							</view>
						</view>
						<!-- <view class="flex1 flex-between">
							<view class="size-20">
								作品版税{{this.configurationlist.author_rate}}%:
							</view>
							<view class="">
								-￥{{sellprice2==''? '0.00':sellprice2}}
							</view>
						</view>
						<view class="flex1 flex-between">
							<view class="size-20">
								支付通道使用税{{this.configurationlist.pay_rate}}%:
							</view>
							<view class="">
								-￥{{sellprice2==''? '0.00':sellprice2}}
							</view>
						</view> -->
						<view class="flex1 flex-between">
							<view class="size-20">
								商品出售所得:
							</view>
							<view class="">
								￥{{sellprice4==''? '0.00':sellprice4}}
							</view>
						</view>
					</view>
				</view>
				<u-button class="btn_color" shape="circle" style='' @click="sellbtn">确认</u-button>
			</view>
		</u-popup>
		<!-- 下架 -->
		<u-modal @confirm="confirm" show-cancel-button v-model="handleresaleshowrelower" :content="content1">
		</u-modal>
		<!-- 改价 -->
		<u-popup v-model="handleresaleshowprice" mode="center" border-radius=20>
			<view class="p10" style="width: 700rpx;height: 540rpx;">
				<view class="center fw size-32 mt-30">
					改价详细
				</view>
				<view class="p10">
					<view class="flex1 center mt-20">
						<view class="">价格(￥)</view>
						<u-input maxlength=6 v-model="inputprisemodel" @input="inputprise" class='ml-20 '
							placeholder='请输入价格'>
						</u-input>
					</view>
					<view class="" style="line-height: 50rpx;">
						<view class="flex1 flex-between">
							<view class="size-20">
								平台服务费{{this.configurationlist.terrace_rate}}%:
							</view>
							<view class="">
								-￥{{price1==''? '0.00':price1}}
							</view>
						</view>
						<view class="flex1 flex-between">
							<view class="size-20">
								作品版税{{this.configurationlist.author_rate}}%:
							</view>
							<view class="">
								-￥{{price2==''? '0.00':price2}}
							</view>
						</view>
						<view class="flex1 flex-between">
							<view class="size-20">
								支付通道使用税{{this.configurationlist.pay_rate}}%:
							</view>
							<view class="">
								-￥{{price3==''? '0.00':price3}}
							</view>
						</view>
						<view class="flex1 flex-between">
							<view class="size-20">
								商品出售所得:
							</view>
							<view class="">
								￥{{price4==''? '0.00':price4}}
							</view>
						</view>
					</view>
				</view>
				<u-button class="btn_color" shape="circle" style='' @click="pricebtn">确认</u-button>
			</view>
		</u-popup>
		<!-- 支付弹框 -->
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			 :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.images" class="collectPreImg">
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		globalData
	} from "@/App.vue"
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				price1: '',
				price2: '',
				price3: '',
				price4: '',
				sellprice1: '',
				sellprice2: '',
				sellprice3: '',
				sellprice4: '',
				inputprisemodel: '',
				inputcellmodel: '',
				configurationlist: {},
				valuephone: '',
				content1: '将此藏品下架',
				status: '',
				handleresaleshowrelower: false,
				handleresaleshowsell: false,
				handleresaleshow: false,
				handleresaleshowprice: false,
				show: false,
				blindBoxheight: '',
				is_focus: '',
				showUpImg: true,
				textcolor: '0',
				bg_color: '',
				buy_content: '',
				btnDisabled: false,
				preShow: false,
				id: "",
				content: '',
				info: {},
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			// this.users_goods_id = options.users_goods_id
			this.$http('api/orders/usersGoodsDetail', {
				id: this.id,
				// users_goods_id: this.users_goods_id
			}).then(res => {
				this.info = res;
                console.log("===res",res)
				console.log(this.info);
                let newArr = []
                res.images.split(',').forEach((item,index)=>{
                    let obj = {image:item}
                    newArr.push(obj)
                })
                this.info.images_arr = newArr
                this.status = this.info.status
				console.log(this.status);
				this.content = res.content
				this.buy_content = res.buy_content
			})
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
			console.log(getApp().globalData);
		},
		onShow() {
			this.app_token = uni.getStorageSync('im_token')

		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			finish() {
				this.$http('api/user/checkTradePass', {
					pass: this.password
				}).then(res => {
					if (res.is_check == 0) {
						uni.showToast({
							title: "密码错误",
							icon: 'none'
						})
						return;
					} else if (res.is_check == 1) {
						this.$http('api/orders/goodsSale', {
							id: this.id,
							price: this.inputcellmodel,
						}).then(res => {
							console.log(res);
							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							} else if (res.code == 1) {
								uni.showToast({
									title: res.msg,
									icon: "none",
								})
								setTimeout(() => {
									this.handleresaleshowsell = false
								}, 1000)
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
								this.mycollectDetail()
						
							}
						})
						
					}
				});
				this.showKeyboard = false;
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			// 我的藏品详情页
			mycollectDetail() {
				this.$http('api/orders/usersGoodsDetail', {
					id: this.id,
					// users_goods_id: this.users_goods_id
				}).then(res => {
					this.info = res;
                    console.log("====res",res)
                    let newArr = []
                    res.images.split(',').forEach((item,index)=>{
                        let obj = {image:item}
                        newArr.push(obj)
                    })
                    this.info.images_arr = newArr
					console.log(this.info);
					this.status = this.info.status
					console.log(this.status);
					this.content = res.content
					this.buy_content = res.buy_content
				})
			},
			// 改价确认按钮
			pricebtn() {
				this.$http('api/orders/goodsUpdatePrice', {
					id: this.id,
					price: this.inputprisemodel,
				}).then(res => {
					if (res.code == 0) {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					} else if (res.code == 1) {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
						})
						setTimeout(() => {
							this.handleresaleshowprice = false
						}, 1000)
						this.mycollectDetail()
					}
				})
			},
			// 出售确认按钮
			sellbtn() {
				this.handleresaleshowsell = false;
				this.showKeyboard = true;
				this.password = ''; //唤醒输入组件时清空密码
				// console.log(return)
				
				
			},
			// 改价手续费变动
			inputprise() {
				// console.log(this.inputprisemodel);
				this.price1 = this.inputprisemodel * this.configurationlist.terrace_rate * 0.01
				this.price2 = this.inputprisemodel * this.configurationlist.author_rate * 0.01
				this.price3 = this.inputprisemodel * this.configurationlist.pay_rate * 0.01
				this.price4 = this.inputprisemodel - (this.price1 + this.price2 + this.price3)
			},
			// 出售手续费变动
			inputcell() {
				// console.log(this.inputprisemodel);
				this.sellprice1 = this.inputcellmodel * this.configurationlist.terrace_rate * 0.01
				this.sellprice2 = this.inputcellmodel * this.configurationlist.author_rate * 0.01
				this.sellprice3 = this.inputcellmodel * this.configurationlist.pay_rate * 0.01
				this.sellprice4 = this.inputcellmodel - (this.sellprice1 + this.sellprice2 + this.sellprice3)
			},
			// 手续费配置
			configuration() {
				this.$http('api/index/fee', {}).then(res => {
					console.log(res);
					this.configurationlist = res
				})
			},
			// 转售确认
			clicksaleshow() {
				console.log(this.valuephone);
				this.$http('api/orders/goodsTransfer', {
					id: this.id,
					phone: this.valuephone,
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						this.handleresaleshow = false
					} else if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						this.handleresaleshow = false
						setTimeout(() => {
							uni.navigateTo({
								url:'./myCollect'
							})
						}, 1000);
						
						
					}
					
				})
			},
			// 转售
			handleresale() {
				this.handleresaleshow = true
			},
			// 改价
			handleprice() {
				console.log(this.info.price);
				this.price = this.info.price
				this.handleresaleshowprice = true
				this.configuration()
			},
			// 下架外按钮
			handlerelower() {
				this.handleresaleshowrelower = true
			},
			// 下架
			confirm() {
				this.lower()
			},
			// 出售
			handleresell() {
				this.handleresaleshowsell = true
				this.configuration()
			},
			// 下架内确认按钮
			lower() {
				this.$http('api/orders/goodsUpdateShow', {
					id: this.id,
					is_show: 0,
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msh,
							icon: "none"
						})
					} else if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 0
							})
						}, 1000)
					}
				})
			},
			changeImg() {
				console.log(this.showUpImg);
				this.showUpImg = !this.showUpImg
				this.$http('api/user/userFocus', {
					goods_id: this.id,
					type: 0
				}, 'POST').then(res => {
					console.log(res.msg);
					uni.showToast({
						title: res.msg,
                        icon:'none'
					})
				});

			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			// 品牌方
			goBrandside(goods_category_id, id) {
				// uni.navigateTo({
				// 	url: "/pages/home/detailBrandside?goods_category_id=" + goods_category_id + '&id=' + id
				// })
			},
			// 创作者
			goCreator(author_id, id) {
				// uni.navigateTo({
				// 	url: "/pages/home/homeCreator?author_id=" + author_id + '&id=' + id
				// })
			},
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '区域链地址复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '复制成功!',
							icon: 'none'
						});
					},

				);
				// #endif
			},
			// 回退首页
			gobackhome() {
				uni.navigateBack({
					url: '../home/index'
				})
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value)
			},
			handlePre() {
				uni.navigateTo({
					url: './homeShow?url=' + this.info.model_url
				})
			},
			// 预览图片
			toBuy() {
				// this.btnDisabled=true;
				// this.$http('api/orders/goodsApply', {
				// 	id: this.id,
				// 	num:this.value

				// }).then(res => {
				// 	this.btnDisabled=false;
				// 	uni.navigateTo({
				// 		url: '../pay/collectPay?order_id=' + res.order_id
				// 	})
				// })
				this.btnDisabled = true;
				this.$http('api/user/isTradePass', {}).then(res => {
					if (res.is_trade == 0) { //判断是否设置过密码
						console.log('去设置密码')
						uni.showModal({
							title: '提示',
							content: '还未设置密码，去设置密码',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: './password'
									});
								} else if (res.cancel) {}
							}
						});
					} else if (res.is_trade == 1) {
						this.$http('api/orders/goodsApply', {
							id: this.id,
							num: this.value
						}).then(res => {
							this.btnDisabled = false;
							uni.navigateTo({
								url: '../pay/collectPay?order_id=' + res.order_id
							})
						})
					}
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
    .shop_bg {
        width: 100%;
        height: 80%;
        position: absolute;
        left: 0;
        background: #f8f8f8;
        top:520px;
        z-index: -1;
        border-top-right-radius:24rpx ;
        border-top-left-radius:24rpx ;
    }
	.btn_color {
        width: 95%;
		background-image: linear-gradient(to right, #686868, #161616);
		color: #fff;
	}

	.goods_category_name {
		width: 600rpx;
		height: auto;
		word-wrap: break-word;
		/*强制换行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*隐藏后添加省略号*/
		white-space: nowrap;
		/*强制不换行*/
	}

	.author {
		width: 600rpx;
		height: auto;
		word-wrap: break-word;
		/*强制换行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*隐藏后添加省略号*/
		white-space: nowrap;
		/*强制不换行*/

	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.detail_bottom_price {
		width: 490rpx;
		height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 70rpx;
		color: #FFF;
		border-radius: 15rpx;
	}

	.purchase {
		color: #5C5C5C;
		font-size: 22rpx;
	}

	.album_box {
		border-bottom: 2rpx solid #EBEBEB;
		padding: 20rpx;
	}

	.album_box1 {
        padding: 20rpx;
		margin: 0rpx 0 0 0;
	}

	.album {
		color: #000;
		width: 690rpx;
		//border: 2rpx solid #EBEBEB;
		border-radius: 20rpx;
		margin: 30rpx 0 0 -30rpx;
		font-size: 27rpx;
        background: #fff;

	}

	.honmedetail_three {
		color: #000;
		width: 48%;
		height: 130rpx;
		//border: 2rpx solid #EBEBEB;
		border-radius: 20rpx;
        background: #fff;
		margin: 30rpx 0 0 0rpx;
		font-size: 27rpx;
		padding: 20rpx;
	}

	.homedetail_limit_1 {
		width: 100rpx;
		height: 40rpx;
		background-color: #F5BA76;
		text-align: center;
		line-height: 40rpx;
		font-weight: 500;
		// font-family: cursive;
		font-size: 26rpx;
	}

	.homedetail_limit_2 {
		// width: 100rpx;
		height: 40rpx;
		background-color: #F9EFE5;
		text-align: center;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #AB6E28;
		padding: 0 6rpx;
	}

	.detail_name {
		background-color: #FFF;
		color: rgb(0, 0, 0);
		width: 690rpx;
		height: 180rpx;
		border-radius: 22rpx;
		margin: 20rpx 0 0 -30rpx;
		padding: 24rpx;
		font-size: 30rpx;
		//border: 2rpx solid #EBEBEB;
	}

	.flex_around {
		display: flex;
		justify-content: space-around;
	}

	.flex_between {
		display: flex;
		justify-content: space-between;
        align-items: center;
	}

	.flex {
		display: flex;
	}

	.home_detail_bg {
		width: 100%;
		// height: 950rpx;
		height: 91%;
		position: absolute;
		left: 0;
		top: -40rpx;
		z-index: -1;

	}

	.userImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		width: 450rpx;
		background: #59AAFF;
		color: #FFF;
	}

	.buyBtn_lock {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		width: 450rpx;
		background-image: linear-gradient(to right, #686868, #161616);
		color: #FFF;
	}


	.copyImg {
		width: 24rpx;
		height: 24rpx;
	}

	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;

		.nonebtn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: rgba(#714aed, .4);
			margin: 0 auto;
			text-align: center;
			color: #fff;
		}
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 86%;
		display: block;
		margin: 0px auto;
		height: auto;
		position: relative;
		border-radius: 7%;
		top: 160rpx;
		border: 20rpx solid #FFF;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.topWrap {
		// padding-top: 120rpx;
		// background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		// background-color: #FFF;
		width: 100%;
		position: relative;

		.autrhorinfo {
			width: 92%;
			background-color: #FFF;
			margin: 180rpx auto;
			background-image: linear-gradient(to right, #636363, #2B2B2B);
			height: 270rpx;
			padding: 30rpx;


		}
	}


	.infoWrap {
		color: #fff;

		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		// border-radius: 40rpx;
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
</style>
